<template>
	<view class="count">
		<view class="hei">

		</view>
		<view class="topBod p-30 b-f b-r-15 m-b-25">
			<view class="cot m-b-20">
				内容
			</view>
			<textarea name="" v-model="value" placeholder="请输入评价内容" class="inp" id="" cols="30" rows="10"></textarea>
		</view>
		<view class="hei">

		</view>
		<view class="topBod p-30 b-f b-r-15 m-b-25">
			<view class="cot m-b-20 f f-a-c">
				内容 <view class="duo m-l-10">
					(最多9张)
				</view>
			</view>
			<view class="pingText">
				<u-upload ref="uUpload" :show-progress="false" @on-remove="onRemove" upload-text="点击上传" max-count="9"
					:form-data="fromData" width="190" @on-success="succress" :before-upload="beforeUpload" height="190"
					:action="url"></u-upload>
			</view>
		</view>
		<!-- 提交按钮 -->
		<view @click="submit" class="submit">
			提交
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				url: 'https://up-z2.qiniup.com',
				token: '',
				fromData: {
					token: uni.getStorageSync('upload_token'),
					key: ''
				},
				url: uni.getStorageSync('upload_domain'),
				token: uni.getStorageSync('upload_token'),
				vlue: '',
				domain: uni.getStorageSync('domain'),
				imgList: [],
				id: ''
			}
		},
		onLoad(options) {
			this.id = options.id
			this.fromData.key = this.genKey()
			uni.hideLoading()
		},
		methods: {
			async submit() {
				let n = await this.$api.CommentsReview({
					content: this.value,
					images: this.imgList.join(',')
				}, this.id)
				this.$msg(n.message)
				if (n.status) {
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}
			},
			onRemove(index, lists) {
				this.imgList = []
				lists.forEach(item => {
					this.imgList.push(this.domain + '/' + item.response.key)
				})
			},
			succress(data, index, lists, name) {
				uni.hideLoading()
				console.log(data, index, lists, name, '999999999');
				this.imgList.push(this.domain + '/' + data.key)
			},

			genKey() {
				uni.showLoading({
					title: "加载中"
				})
				let n = `img/${+new Date()+'/'+this.randomString()}.png`
				console.log(n);
				return n
			},
			beforeUpload(index, list) {
				console.log(index, list, '000');
				// this.imgList = list.filter(item => {
				// 	return this.domain + '/' + item.response.key
				// })
				this.fromData.key = this.genKey()
				console.log(this.fromData, '8888888');
				return true
			},
			randomString() {
				let str = 'ABCDEFGHIJKIMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
				let num = '';
				for (let i = 0; i < 16; i++) {
					num += str.charAt(Math.floor(Math.random() * str.length));
				}
				console.log(num, '000000000000');
				return num;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.submit {
		position: fixed;
		bottom: 200rpx;

		width: 90%;
		height: 88rpx;
		line-height: 85rpx;
		left: 5%;
		background: #009d85;
		border-radius: 44rpx;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #ffffff;
	}

	.pingText {
		width: 90%;
		// padding: 30rpx 20rpx;
		border-radius: 30rpx;
		background-color: #fff;
		// margin: 20rpx auto;

		.tu {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: LEFT;
			color: #666666;
			margin-bottom: 20rpx;
		}
	}

	.hei {
		height: 25rpx;
		width: 100%;
	}

	/deep/ .u-list-item {
		width: 160rpx !important;
		height: 160rpx !important;
		margin-right: 10rpx;
	}

	.topBod {
		width: 90%;
		margin: 0 auto;

		.cot {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #333333;
		}

		.inp {
			height: 150rpx;
			width: 100%;
		}
	}

	.duo {
		font-size: 24rpx;
	}
</style>